package myJs.cultivars.seq

import myJs.cps.Style
import myJs.myPkg.reactBootstrap.{Tab, Tabs}
import slinky.core.FunctionalComponent
import slinky.core.annotations.react
import slinky.core.facade.Hooks.useState
import slinky.web.html._

/**
 * Created by yz on 3/11/2020
 */
@react object SeqCp {

  case class Props()

  val component = FunctionalComponent[Props] { props =>

    val (tab, setTab) = useState("heatmap")

    object FTool {

      def tabChange = (v: String) => {
        setTab(v)
      }

    }

    div(
      h4("Dissimilarity indices among macadamia cultivars estimated by neighbour join analysis of DArTseq based SNP markers(",
        a(href := "https://www.ncbi.nlm.nih.gov/pubmed/30169500", "Alam, M. 2018"),
        "):"),
      Tabs(id = "tab", activeKey = tab, onSelect = FTool.tabChange, transition = false)(
        Tab(eventKey = "heatmap", title = "Heatmap")(
          div(style := Style(marginTop = "20px"),
            HeatmapCp()
          )
        ),
        Tab(eventKey = "phylo", title = "Phylogenetic Tree")(
          div(style := Style(marginTop = "20px"),
            PhyloCp()
          )
        ),
      ),
    )


  }

}
